<template>
  <div class="content">
    <img src="../assets/logo.png" class="image" />
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      class="form"
      :rules="rule"
    >
      <el-form-item label="用户名" class="label" prop="username">
        <el-input
          v-model="form.username"
          prefix-icon="el-icon-s-custom"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" class="label" prop="password">
        <el-input
          v-model="form.password"
          prefix-icon="el-icon-s-help"
        ></el-input>
      </el-form-item>

      <el-form-item class="flexbox">
        <el-button type="primary" @click="loginTest">登录</el-button>
        <el-button type="info" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      },
      rule: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 5, max: 11, message: "长度在 5 到 11 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 5, max: 11, message: "长度在 5 到 11 个字符", trigger: "blur" }
        ]
      }
    };
  },
  created() {},
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    reset() {
      this.$refs.form.resetFields();
    },
    loginTest() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          const { data } = await this.$http.post("login", this.form);

          if (data.meta.status == 200) {
            this.$message.success("登录成功");
            sessionStorage.setItem('token',data.data.token)
            this.$router.push('/home')

          } else {
            this.$message.error("登录失败");
          }
        } else {
          alert("用户名或密码格式不正确");
        }
      });
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.content {
  position: absolute;
  width: 35%;
  height: 45%;
  background-color: aliceblue;
  border-radius: 10px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.image {
  width: 130px;
  height: 130px;
  position: absolute;
  left: 50%;

  transform: translate(-50%, -50%);
  border: 10px solid #eee;
  box-shadow: 0 0 10px #ddd;
  background-color: #fff;
  border-radius: 50%;
}

.form {
  position: absolute;
  width: 100%;
  bottom: 30px;
}

.flexbox {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: flex-end;
  padding: 0 10px;
  box-sizing: border-box;
}

.label {
  padding: 0 10px;
}

html{
  
  background-color: rgba(58, 147, 206, 0.863);
}
</style>
